<script setup>
    import Top from '../components/Top.vue'
    import NagrProd from '../components/NagrProd.vue'
    import NagrPcap from '../components/NagrPcap.vue'
</script>
<template>
    <div class="views">
        <dv-full-screen-container class="dv-full-screen-container">
            <div class="toptext">
                <Top></Top>
            </div>
            <div class="body">
                <div class="lie">
                    <div class="hang">
                        <div class="lie">
                           <NagrProd></NagrProd>
                        </div>
                    </div>
                    <div class="hang">
                        <div class="lie">
                            <NagrPcap></NagrPcap>
                        </div>
                    </div>
                </div>
                <div class="lie">
                    <div class="hang">
                        <div class="lie">
        
                        </div>
                    </div>
                    <div class="hang">
                        <div class="lie">
                           
                        </div>
                    </div>
                    <div class="hang">
                        <div class="lie">
                        
                        </div>
                    </div>
                </div>
                <div class="lie">
                    <div class="hang">
                        <div class="lie">
                         
                        </div>
                    </div>
                    <div class="hang">
                        <div class="lie">
                     
                        </div>
                    </div>
                </div>
            </div>
        </dv-full-screen-container>
    </div>
</template>

<style lang="css" scoped>
.views{
    width: 100vw;
    height: 100vh;
    background-color: black;
    color:white;
}
.dv-full-screen-container{
    background-image: url('../imgs/bg.png');
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display:flex ;
    flex-direction: column;
}
.toptext{
        width: 100%;
        height: 100px;
        text-align: center;
}
.body{
    width: 100%;
    height: 100%;
    display: flex;
    flex:1;
    justify-content: space-between;
    flex-direction:row;
    position: relative;
    top:-20px;
}
.hang,.lie{
    width: 100%;
    height: 100%;
    display: flex;
    flex:1;
    justify-content: space-between;
}
.hang{
    flex-direction:row;
}
.lie{
    flex-direction: column;
}
</style>